﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务调度管理</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="~/Lib/element-ui/index.css">
    <link rel="stylesheet" href="~/Lib/element-ui/element-icons.ttf">
    <link rel="stylesheet" href="~/Lib/element-ui/element-icons.woff">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="~/Lib/vue/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="~/Lib/element-ui/index.js"></script>
</head>
<body>
    <div id="app">
        <el-row class="e1-roret">
            <el-button size="small" type="info" icon="el-icon-plus" @@click ="dialogVisible = true">新建任务</el-button>
            <el-button size="small" type="success" @@click="tiggerAction()" icon="el-icon-switch-button">暂停任务</el-button>
            <el-button size="small" type="warning" @@click="tiggerAction()" icon="el-icon-caret-right">开启任务</el-button>
            <el-button size="small" type="primary" @@click="tiggerAction()" icon="el-icon-right">立即执行</el-button>
            <el-button size="small" type="error" @@click="update()" icon="el-icon-edit-outline">修改任务</el-button>
            <el-button size="small" type="danger" icon="el-icon-close" @@click="tiggerAction()">删除任务</el-button>
            <el-button size="small" type="primary" icon="el-icon-refresh-right" @@click="refresh()">刷新数据</el-button>
        </el-row>

        <el-row>
            <el-table :data="tableData"
                      style="width: 100%">
                <el-table-column prop="WorkName"
                                 label="作业名称"
                                 width="100">
                </el-table-column>
                <el-table-column prop="grouping"
                                 label="分组"
                                 width="100">
                </el-table-column>
                <el-table-column prop="Timestamp"
                                 label="最后执行时间"
                                 width="120">
                </el-table-column>
                <el-table-column prop="timeinterval"
                                 label="间隔(Cron)"
                                 width="100">
                </el-table-column>
                <el-table-column prop="runningstate"
                                 label="状态"
                                 width="100">
                </el-table-column>
                <el-table-column prop="describe"
                                 label="描述">
                </el-table-column>
                <el-table-column prop="ApiUir"
                                 label="ApiUrl"
                                 width="*">
                </el-table-column>
                <el-table-column prop="Requestmethod"
                                 label="请求方式"
                                 width="100">
                </el-table-column>
                <el-table-column
                                 label="操作"
                                 width="100">
                    <template slot-scope="scope">
                        <el-button size="small" type="info" icon="el-icon-plus" v-on:click="ViewTask(scope.$index)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="新建任务" ref="form"
                       :visible.sync="dialogVisible"
                       :before-close="handleClose">
                <el-form ref="form" :model="form" label-width="110px"
                         :rules="Taskworkrules">
                    <el-form-item label="作业名称:" prop="WorkName">
                        <el-input size="small" v-model="form.WorkName" placeholder="作业名称与触发器名称默认相"></el-input>
                    </el-form-item>
                    <el-form-item label="分组名称:" prop="grouping">
                        <el-input size="small" v-model="form.grouping" placeholder="分组名称与分组名称默认相同"></el-input>
                    </el-form-item>
                    <el-form-item label="间隔(Cron):" prop="timeinterval">
                        <el-input size="small" v-model="form.timeinterval" placeholder="如10分钟执行一次：0/0 0/10 * * * ?"></el-input>
                    </el-form-item>
                    <el-form-item label="ApiUrl:" prop="ApiUir">
                        <el-input size="small" v-model="form.ApiUir" placeholder="远程调用接口URL"></el-input>
                    </el-form-item>
                    <el-form-item label="请求头:">
                        <el-table :show-header="false" :data="form.header">
                            <el-table-column prop="headerkey"
                                             width="180px">
                                <template slot-scope="scope">
                                    <el-input size="small" v-model="scope.row.key" placeholder="请求header验证的Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="headervalue">
                                <template slot-scope="scope">
                                    <el-input size="small" v-model="scope.row.value" placeholder="请求header验证的value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column width="80px">
                                <template slot-scope="scope">
                                    <el-button size="small" type="danger" icon="el-icon-close" v-on:click="Addheader(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column width="80px">
                                <template slot-scope="scope">
                                    <el-button size="small" type="info" icon="el-icon-plus" v-on:click="Addheader(-2)">添加</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item label="请参数:">
                        <el-table :show-header="false" :data="form.Requestparameters">
                            <el-table-column prop="key"
                                             width="180px">
                                <template slot-scope="scope">
                                    <el-input size="small" v-model="scope.row.key" placeholder="键值Key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="value">
                                <template slot-scope="scope">
                                    <el-input size="small" v-model="scope.row.value" placeholder="数据value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column width="80px">
                                <template slot-scope="scope">
                                    <el-button size="small" type="danger" icon="el-icon-close" v-on:click="AddReque(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column width="80px">
                                <template slot-scope="scope">
                                    <el-button size="small" type="info" icon="el-icon-plus" v-on:click="AddReque(-2)">添加</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item label="请求方式:" prop="Requestmethod">
                        <el-select size="small" v-model="form.Requestmethod" placeholder="请选择请求方式">
                            <el-option label="GET" value="GET"></el-option>
                            <el-option label="POST" value="POST"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="描述:">
                        <el-input size="small" type="textarea" v-model="form.describe"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @@click ="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @@click ="SavWork()">保 存</el-button>
                </span>
            </el-dialog>
        </el-row>
    </div>
    <script>
        new Vue({
        el: '#app',
        data: function () {
        return {
           dialogVisible: false,
           tableData: [],
               form:{
                    WorkName:"",
                    grouping:"",
                    timeinterval:"",
                    ApiUir:"",
                    header:[{
                            key:"",
                            value:""
                    }],
                            Requestparameters:[{
                                          key:"",
                                          value:""
                            }],
                    Requestmethod:"",
                    describe:""
                    },
                   Taskworkrules:{
                                        WorkName:[{
                                                    required: true, message: '请输入作业名称', trigger: 'blur'
                                        }],
                                                                 grouping:[{
                                                            required: true, message: '请输入分组名称', trigger: 'blur'
                                                }],
                                                                         timeinterval:[{
                                                            required: true, message: '请输入时间间隔', trigger: 'blur'
                                                }],
                                                                         ApiUir:[{
                                                            required: true, message: '请输入作业地址', trigger: 'blur'
                                                }],
                                                                         Requestmethod:[{
                                                            required: true, message: '请输入调用方式', trigger: 'blur'
                                                }],


                            }
        }
              },
                methods:{
                            ViewTask(o){

                            },
                         handleClose(done) {
                        this.$confirm('确认关闭？')
                  .then(_ => {
                    done();
                  })
                  .catch(_ => {});
                              },
                              SavWork(){
                                 let xhr = new XMLHttpRequest(); // 创建XHR对象
                                   xhr.open( // 打开链接
                                            "post",
                                                "Addwork", // 后端地址
                                         true
                                            );
                                 // 注册事件监听器
                                  xhr.onreadystatechange = function () {
                                  // 判断 readyState 是否为 4（请求完成）
                                 if (xhr.readyState === 4) {
                                  // 判断 HTTP 状态码是否为 200（请求成功）
                                  if (xhr.status >= 200 && xhr.status < 300) {
                                  console.log('请求成功:');
                                   console.log('响应内容:', xhr.responseText); // 读取响应数据（文本格式）
                                   } else {
                                  console.error('请求失败:', xhr.status, xhr.statusText);
                                   }
                                   }
                                   };
                                     xhr.setRequestHeader('Content-Type', 'application/json')
                                                             if(this.form.header.length==1&&this.form.header[0].key=="")
                                                     {
                                                     this.form.header={}
                                                     }
                                                     else
                                                     {
                                                                           console.log(this.form.header);
                                                                                 const   projectedObject = Object.fromEntries(this.form.header.map(({ key, value }) => [key, value]));
                                                                     this.form.header=projectedObject;
                                                     
                                                     }
                                                                            if(this.form.Requestparameters.length==1&&this.form.Requestparameters[0].key=="")
                                                             {
                                                                     this.form.Requestparameters={}
                                                             }else{
                                                                                      const   projectedObject1 = Object.fromEntries(this.form.Requestparameters.map(({ key, value }) => [key, value]));
                                                                                     this.form.Requestparameters=projectedObject1;
                                                             }
                                     xhr.send(JSON.stringify(this.form));
                              },
                                                              //开始任务
                                tiggerAction(){

                                },
                                // 更新任务
                                 update(){

                                        },
                                //刷新数据
                                refresh(){

                                          },
                                //添加请求头
                                        Addheader(o){
                                            if(o==-2)
                                            {
                                this.form.header.push({
                                    headerkey:"",
                                    headervalue:""
                            })
                                            }
                                            else
                                            {
                                             if(o>0)
                                           this.form.header.splice(o,1)
                                            }
                                               
                                          },
                                                  AddReque(o){

                                               if(o==-2)
                                                    {
                                                this.form.Requestparameters.push({
                                            key:"",
                                            value:""
                                    })
                                                    }
                                                    else
                                                    {
                                                     if(o>0)
                                                           this.form.Requestparameters.splice(o,1)
                                                    }

                                                  }
                                       }

                                  

        
})
    </script>
    <style>
        .e1-roret{
            text-align:right
        }
        .el-dialog__header {
            background-color: #0CACF9; /* 标题栏背景色 */
      
        }
        .el-dialog__title {
            color: white
        }
        .el-dialog__headerbtn .el-dialog__close {
            color: white;
        }
    </style>
</body>
</html>